<style scoped lang="less">
    .selected-search-components {
        .selected-search {
            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
            height: 300px;
            width: 200px;
            font-size: 16px;
            position: relative;
            border-radius: 4px;

            .search-action {
                position: absolute;
                top: 10px;
                left: 10px;
                right: 10px;
            }

            .selected-arr {
                position: absolute;
                top: 50px;
                left: 20px;
                right: 20px;
                bottom: 10px;
                overflow: scroll;
            }
        }
        .select-click {
            border: 1px solid #dddee1;
            border-radius: 4px;
            padding: 0 10px;
            margin-bottom: 10px;
        }
    }

</style>
<template>
    <div class="selected-search-components">
        <Form-item :label="selectBaseInfo.title" prop="">
            <p @click="selectIsShow ? selectIsShow =false : selectIsShow = true" class="select-click">
                {{resultName}}</p>
            <template v-if="selectBaseInfo.postType == 'user'">
                <div v-if="selectIsShow" class="selected-search">
                    <div class="search-action" style="display: flex">
                        <i-input v-model="keyword" :placeholder="selectBaseInfo.placeholder"></i-input>
                    </div>
                    <div class="selected-arr">
                        <template v-for="(item,index) in resultArr">
                            <p @click="chooseResult(item.Id,item.Displayname)" class="selected-item">
                                {{item.Displayname}}</p>
                        </template>
                    </div>
                </div>
            </template>
            <template v-else>
                <div v-if="selectIsShow" class="selected-search">
                    <div class="search-action" style="display: flex">
                        <i-input v-model="keyword" :placeholder="selectBaseInfo.placeholder"></i-input>
                    </div>
                    <div class="selected-arr">
                        <template v-for="(item,index) in resultArr">
                            <p @click="chooseResult(item.Id,item.Title,item)" class="selected-item">{{item.Title}}</p>
                        </template>
                    </div>
                </div>
            </template>
        </Form-item>
    </div>
</template>
<script>

    import apiUtil from '../assets/utils/api_util'

    export default {
        data() {
            return {
                selectIsShow: false,
                resultId: '',
                resultArr: [],
                resultName: '请选择',
                keyword: '',
            }
        },
        props: {
            selectBaseInfo: {},
        },
        components: {},
        created() {
            this.getSearchData();
        },
        watch: {
            keyword: function (val1, val2) {
                if (val1 != val2) {
                    this.getSearchData();
                }
            },
        },
        methods: {
            getSearchData() {
                let that = this;


                this.$Loading.start();

                if (that.selectBaseInfo.postType == 'user') {
                    // let para = {
                    //     searchTxt: this.keyword,
                    //     uid: sessionStorage.getItem('userId')
                    // };
                    // let params = that.$qs.stringify(para);
                    // apiUtil.post(that, that.selectBaseInfo.postUrl, params, function (res) {
                    //     that.$Loading.finish();
                    //     that.resultArr = res.Msg;
                    //     console.log('数据:', res.Msg);
                    //     console.log('resultArr:', that.resultArr)
                    // });


                    let para = {
                        searchKey: this.keyword,
                        searchType:'name'
                        };
                    apiUtil.get(that, that.selectBaseInfo.postUrl, para, function (res) {
                        that.$Loading.finish();
                        that.resultArr = res.Msg.Arrays;
                        console.log('数据:', res.Msg);
                        console.log('resultArr:', that.resultArr)
                    });

                } else {
                    let para = {
                        keyword: this.keyword,
                    };
                    apiUtil.get(that, that.selectBaseInfo.postUrl, para, function (res) {
                        that.$Loading.finish();
                        that.resultArr = res.Msg;

                    });
                }

            },
            chooseResult: function (id, name,item) {
                this.resultId = id;
                this.resultName = name;
                this.selectIsShow = false;

                let postData = {
                    resultId: id,
                    resultName: name,
                    resultItem:item,
                };
                this.$emit("post-data", postData);
            },
        }
    }
</script>
